Colorpicker (Library)

Colorpicker

Adds a color palette to a Web page.

Syntax

HTML	<ELEMENT id=elementID class="colorPicker" />

The color palette displayed in the HTML page enables you to select a specific color from a visual control, which has sliders that indicate the colors in the component. The Red, Green and Blue colors are represented in the sliders of the control.

This component enables you to add a visual control for assigning color values to elements in a Web page. It also helps in defining the color codes for a web page. The color codes (red, green and blue) can be adjusted with the help of horizontal sliders. A color map is also provided, which gives an alternate way to adjust all the three codes together.

To dynamically add and initialize this component, you can use the initializeHTMLElements() or addType() methods of the Application object.

The methods and events defined for this component are as follows:

Table 1. List of Methods

Method

Description

setColor(red, green, blue)

Sets value for red, green and blue colors in the control. The parameters red, green and blue can take values between 0 and 255. The method returns a Boolean variable indicating whether the color is set or not.

getColor

Gets the value of the color defined in the colorPicker in RGB (<0-255>,<0-255>,<0-255>) format.
The colors retrieved using the method can be accessed by the properties defined in the method. For example, getColor().g gives the value of green color defined in the control. Similarly, getColor().hex gives the hexadecimal value of the color defined in the control.

Table 2. List of Events
Event	Description
oncolorchange	Fires when a color is changed in the colorPicker.

Note:

Only one colorPicker component must be used for an HTML page.
The values specified in the colorpicker should be within the valid range. Unexpected errors may occur if values are not specified, or if they are wrong.

Example

This following sample code shows the implementation and use of the colorPicker behavior.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/cordys/wcp/application.js"></script>
<title>Color Picker Demo</title>
<script type="text/javascript">
function changeColor()
{
document.getElementById("txtBox").style.backgroundColor = window.application.event.rgb;
}

function getColorState()
{
application.notify(document.getElementById("cPicker").getColor().rgb);
}

function setColorState()
{
document.getElementById("cPicker").setColor(20,20,20);
}

</script>
</head>
<body>
<h1 align="center">Color Picker Demo</h1>
<table id="table1" name="table1" height="50%" width="100%">
<tr>
<td align="center" valign="middle">
<div class='medium colorpicker' id="cPicker" style='border:2px groove ' oncolorchange="changeColor()"></div>
</td>
</tr>
<tr>
<td align="center">
<textarea id="txtBox" rows=4 style="overflow:auto" readonly></textarea>
</td>
</tr>
<tr align="center">
<td>
<input type="button" value="getColor()" onclick="getColorState()"/>
<input type="button" value="setColor()" onclick="setColorState()"/>
</td>
</tr>
</table>
</body>
</html>

pp108 : Colorpicker (Library)

Colorpicker (Library)

Colorpicker

Syntax

Example